<template>
    <div class="box">
        <!-- 顶部 -->
        <div class="top">
            <div class="avatar" @click="tologin()">
                <van-image
                    round
                    width="4rem"
                    height="4rem"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="userinfo" @click="tologin()">
                <div v-if="getuser()">
                    <p>{{nickname}}</p>
                    <p>{{username}}</p>
                </div>
                <div v-else>
                    <p>登录</p>
                    <p>我的账号</p>
                </div>
            </div>
            <div class="set">
                <van-icon name="setting-o" color="#fff" size="30" @click="showPopup"/>
                <van-popup v-model="show" closeable close-icon-position="top-right" position="right" :style="{ height: '100%', width:'60%'}">
                    <p>设置</p>
                    <div class="setting">
                        <van-cell title="手机绑定" :border="false"/>
                        <van-cell title="账号与安全" :border="false"/>
                        <van-cell title="免密支付" :border="false"/>
                        <van-cell title="信息接收" :border="false"/>
                        <van-cell title="优选小圈" :border="false"/>
                        <van-cell title="隐私号码保护" :border="false"/>
                        <van-cell title="常见问题" :border="false"/>
                        <van-cell title="意见反馈" :border="false"/>
                        <van-cell title="清除缓存" :border="false"/>
                        <van-cell title="个人信息" :border="false"/>
                        <van-cell title="关于优选" :border="false"/>
                        <van-button type="warning" color="linear-gradient(to right, #ff6034, #ee0a24)">切换账号</van-button>
                        <van-button type="warning" color="gray">退出登录</van-button>
                    </div>
                </van-popup>
            </div>
        </div>
        <div class="collect">
            <van-grid icon-size="20px" :border="false">
                <van-grid-item icon="star-o" text="收藏" />
                <van-grid-item icon="shop-o" text="订阅店铺" />
                <van-grid-item icon="clock-o" text="足迹" />
                <van-grid-item icon="coupon-o" text="优惠券" dot/>
            </van-grid>
        </div>
        <!-- 钱包 -->
        <div class="money">
            <van-cell title="我的钱包" :border="false"/> 
            <p>查看钱包</p>
            <van-icon name="arrow" size="15" color="#000"/>
        </div>
        <!-- 我的订单 -->
        <div class="goods">
            <div class="good"> 
                <van-cell title="我的订单" :border="false"/>
                <p>全部订单</p>
                <van-icon name="arrow" size="16" color="#000"/>
            </div>
            <van-grid :column-num="5" icon-size="20px" :border="false">
                <van-grid-item icon="pending-payment" text="待付款" />
                <van-grid-item icon="share-o" text="待分享" @click="showShare = true"/>
                <van-share-sheet
                v-model="showShare"
                title="分享"
                :options="options"
                @select="onSelect"
                />
                <van-grid-item icon="underway-o" text="待发货" dot/>
                <van-grid-item icon="logistics" text="待收货" />
                 <van-grid-item icon="more-o" text="评价" badge="99+"/>
             </van-grid>
        </div>
        <!-- 小游戏 -->
        <div class="game">
            <van-grid :column-num="4" icon-size="20px" :border="false" color="#1989fa">
                <van-grid-item icon="eye" text="优选果园"/>
                <van-grid-item icon="bag" text="免费商品" badge="99+"/>
                <van-grid-item icon="bill" text="天天领现金" badge="99+"/>
                <van-grid-item icon="gem" text="优选爱消除" badge="99+"/>
                <van-grid-item icon="music" text="优选音乐" badge="99+"/>
                <van-grid-item icon="location" text="收货地址"/>
                <van-grid-item icon="phone-circle" text="官方客服"/>
                <van-grid-item icon="gold-coin" text="退款售后"/>
            </van-grid>
        </div>
        <!-- 精选推荐 分割线 -->
        <div class="ff">
            <van-divider :style="{ color: 'red', borderColor: 'black', padding: '0 5px' }">
                精选推荐
            </van-divider>
            <!-- 精选商品开始 -->
        <div class="typePros">
            <!-- 每个商品和分类的大盒子 -->
            <div class="typePro" v-for="typePro in tp" :key="typePro.id"> 
                <!-- 每个分类下的每个商品 -->
                <div class="product" v-for="product in typePro.products" :key="product.id">
                    <!-- 商品来源 -->
                    <p class="supplier">本商品产自{{product.supplier}}</p>
                    <!-- 商品图片 -->
                    <img :src="product.banner" alt=""> 
                    <!-- 商品名称 -->
                    <p>{{product.name}}</p>
                    <!-- 商品规格 -->
                    <p class="specs">商品规格：{{product.specs}}</p>
                    <!-- 商品价格 -->
                    <p class="price">价格：￥{{product.price}}元</p>
                    <!-- 加入购物车 -->
                    <van-button round type="warning" color="linear-gradient(to right, #ff6034, #ee0a24)">加入购物车</van-button>
                </div>
            </div>
        </div>
        <!-- 精选商品结束 -->
        </div>
    </div>
</template>

<script>
    import {getCookie} from '@/utils/cookie'
    import Vue from 'vue';
    import { Grid, GridItem } from 'vant';
    import { Icon } from 'vant';
    import { Image as VanImage } from 'vant';
    import { ShareSheet } from 'vant';
    import { Toast } from 'vant';
    import { Cell } from "vant";
    import { Divider } from 'vant';
    import axios from 'axios'
    import {Button} from 'vant';
    import {getBanner,getTypes,getTP} from '@/request'
    import Swiper from 'swiper';
    import { Popup } from 'vant';

    Vue.use(Popup);
    Vue.use(Button);
    Vue.use(Divider);
	Vue.use(Cell); 
    Vue.use(ShareSheet);
    Vue.use(VanImage);
    Vue.use(Icon);
    Vue.use(Grid);
    Vue.use(GridItem);

    export default {
        data () {
            return {
                value: '',
                banners:[],
                types:[],
                tp:[],
                username:'',
                nickname:'',
                show: false,
                showShare: false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            };
        },
        methods: {
            async qingqiu(){
                var banners = await getBanner()
                var types = await getTypes()
                var tp = await getTP()
                this.banners = banners
                this.types = types
                this.tp = tp
            },
            showPopup() {
                this.show = true;
            },
            tologin() {
                // 跳转页面
                this.$router.push('/my/login')
            },
            toregister() {
                // 跳转页面
                this.$router.push('/my/register')
            },
            getuser(){
                if(getCookie('username')){
                    this.username = getCookie('username')
                    this.nickname = getCookie('nickname')
                    return true
                }
                return false
            },
            onSelect(option) {
                Toast(option.name);
                this.showShare = false;
            },
        },
        created(){
            console.log(this.qingqiu);
            
            this.qingqiu()
        },
        updated(){
            var swiper = new Swiper(".mySwiper",{
                loop:true,
                autoplay:true,
                pagination:{
                    el:".swiper-pagination",
                },
            })
        }
    }
</script>

<style scoped>
    .box{
        padding: 10px;
        background-color: rgb(246, 246, 246);
    }
    .top{
        height: 100px;
        display: flex;
        justify-content: start; 
        align-items: center;
        background-image: url('../../assets/a1.webp')
    }
    .userinfo p{
        font-size: larger;
        color: #fff;
    }
    p{
        color:#000;
        font-weight: bolder;
    }
    .van-image{
        margin: 20px 5px;
    }
    .top .van-icon{
        margin: 10px 10px 30px 10px;
        color: rgb(9, 13, 17);
    }
    .top .userinfo{
        flex: 8;
    }
    .set p{
        margin: 15px 100px;
    }
    .set .setting{
        margin:5px 10px;
    }
    .set .van-cell{
        background-color: rgb(246, 246, 246);
    }
    .set .setting .van-button{
        margin:15px 35px 15px 25px;
    }
    .collect{
        height: 90px;
    }
    .money{
        height: 45px;
        display: flex;
        justify-content: start;
        align-items: center;
        background-color: #fff;

    }
    .money p{
        height: 15px;
        width: 70px;
        font-size: 5px;
    }
    .goods{
        margin: 10px 0;
    }
    .good{
        height: 45px;
        display: flex;
        justify-content: start;
        align-items: center;
        background-color: #fff
    }
    .good p{
        height: 15px;
        width: 70px;
        font-size: 5px;
    }
    .game{
        height: 150px;
    }
    .ff{
        height: 20px;
    }
    .product{
          width: 370px;
          background-color: #fff;
          padding: 10px;
          margin:5px 10px;
          border-radius:20px;
    }
    .product .supplier{
        font-size: 18px;
        text-align: center;
    }
    .product img{
        width: 100%;
        border-radius: 20px;
    }
    .product .proname, .product .specs{
        font-size: 18px;
        padding: 0 10px;
    }
    .product .price{
        font-size: 20px;
        font-weight: bold;
        padding-left: 10px;
    }
    .van-button{
        display: block;
        width: 80%;
        font-size: 20px;
        margin: 0 auto;
    }
</style>